<template>
  <view class="viewport">
    <view class="cover">
      <image :src="bannerPicture" mode="scaleToFill" />
    </view>
    <view class="tabs">
      <text
        v-for="(item, index) in subTypes"
        :key="item.id"
        class="text"
        :class="{ active: index === activeIndex }"
        @tap="activeIndex = index"
        >{{ item.title }}</text
      >
    </view>
    <scroll-view
      scroll-y
      class="scroll-view"
      v-for="(item, index) in subTypes"
      :key="item.id"
      v-show="index === activeIndex"
      @scrolltolower="onScrolltolower"
    >
      <view v-for="goodsItem in item.goodsItems.items" :key="goodsItem.id" class="goods">
        <navigator
          hover-class="none"
          class="navigator"
          :url="`/pages/goods/goods?id=${goodsItem.id}`"
        >
          <image class="thumb" :src="goodsItem.picture" mode="widthFix" />
          <view class="name ellipsis">{{ goodsItem.name }}</view>
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">{{ goodsItem.price }}</text>
          </view>
        </navigator>
      </view>
      <view class="loading-text">
        {{ item.finish ? '没有更多数据了～' : '正在加载...' }}
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { getHotRecommendAPI } from '@/services/hot'
import { onLoad } from '@dcloudio/uni-app'
import type { HotResult, SubTypeItem } from '@/types/hot'
import { ref } from 'vue'

const activeIndex = ref(0)

const bannerPicture = ref('')
const subTypes = ref<(SubTypeItem & { finish?: boolean })[]>([])

const urlMap = [
  {
    type: '1',
    title: '特惠推荐',
    url: '/hot/preference',
  },
  {
    type: '2',
    title: '爆款推荐',
    url: '/hot/inVogue',
  },
  {
    type: '3',
    title: '一站全买',
    url: '/hot/oneStop',
  },
  {
    type: '4',
    title: '新鲜好物',
    url: '/hot/new',
  },
]

// 路由参数也可以通过defineProps去获取
const query = defineProps<{
  type: string
}>()
const currUrlMap = urlMap.find((v) => v.type === query.type)
// 动态设置标题
uni.setNavigationBarTitle({ title: currUrlMap?.title! })

const getHotRecommendData = async () => {
  const res = await getHotRecommendAPI(currUrlMap!.url, {
    page: import.meta.env.DEV ? 32 : 1,
    pageSize: 10,
  })
  bannerPicture.value = res.result.bannerPicture
  subTypes.value = res.result.subTypes
}

const onScrolltolower = async () => {
  const currSubTypes = subTypes.value[activeIndex.value]
  // 分页条件
  if (currSubTypes.goodsItems.page < currSubTypes.goodsItems.pages) {
    currSubTypes.goodsItems.page++
  } else {
    currSubTypes.finish = true
    return uni.showToast({ icon: 'none', title: '没有更多数据了～' })
  }

  const res = await getHotRecommendAPI(currUrlMap!.url, {
    subType: currSubTypes.id,
    page: currSubTypes.goodsItems.page,
    pageSize: currSubTypes.goodsItems.pageSize,
  })
  const newSubTypes = res.result.subTypes[activeIndex.value]
  currSubTypes.goodsItems.items.push(...newSubTypes.goodsItems.items)
}

onLoad(() => {
  getHotRecommendData()
})
</script>

<style scoped lang="scss">
.viewport {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.cover {
  width: 100%;
  image {
    width: 100%;
    height: 225rpx;
  }
}
.tabs {
  margin-bottom: 12rpx;
  width: 100%;
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  .active {
    position: relative;
    &::after {
      content: '';
      display: block;
      background: #000;
      left: 0;
      bottom: 0;
      position: absolute;
      width: 100%;
      height: 2rpx;
    }
  }
}
.scroll-view {
  flex: 1;
  .goods {
    margin-bottom: 12rpx;
    display: inline-block;
    width: 50%;
    .navigator {
      display: flex;
      flex-direction: column;
      align-items: center;
      .thumb {
        width: 305rpx;
        height: 305rpx;
      }
      .name {
        width: 305rpx;
        line-height: 44rpx;
        font-size: 30rpx;
      }
      .price {
        width: 305rpx;
        line-height: 1;
        color: #cf4444;
        font-size: 30rpx;
      }
      .symbol {
        font-size: 70%;
      }
      .decimal {
        font-size: 70%;
      }
    }
  }
}

.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0 50rpx;
}
</style>
